<template>
	<view class="">
		<u-popup v-model="show" mode="bottom" round="20" :mask-close-able="false">
			<view class="toolbar-wrap flex-row justify-between">
				<view @click="cancel" :style="{ color: `${cancelColor}` }">
					{{cancelText}}
				</view>
				<view class="" :style="{ color: `${titleColor}` }">
					{{title}}
				</view>
				<view @click="confirm" :style="{ color: `${confirmColor}` }">
					<!-- {{confirmText}} -->
					<image class="image_9" src="https://terminator.axu9.com/images/edit/confirm-icon.png" />
				</view>
			</view>
			<view class="flex-row justify-center" style="background-color: #111113;">
				<block v-if="column == 1">
					<picker-view indicator-style="color: #00E587;" mask-style="background:rgba(0,0,0,0);" indicator-class="picker-box" class="u-picker-view" style="" @change="onChange">
						<picker-view-column class="picker-box-column">
							<block v-if="max == 0">
								<view class="" :class="index == selectedIndex ? 'selected-item':  'picker-box-item'" style="" v-for="(item, index) in list" :key="index">
									{{ item.label }}
								</view>
							</block>
							<block v-else>
								<view v-if="min == 0" class="picker-box-item" style="" v-for="(item, index) in max" :key="index">
									{{ index }}
								</view>
								<view v-if="min == 1" class="picker-box-item" style="" v-for="(item, index) in max" :key="index">
									{{ index+1 }}
								</view>
								<view v-else class="picker-box-item" style="" v-for="(item, index) in max" :key="index">
									{{ index+1 }}
								</view>
							</block>

						</picker-view-column>
					</picker-view>
				</block>
				<block v-if="column == 2">
					<picker-view :value="value" indicator-class="picker-box" class="u-picker-view" style="" @change="bindChange">
						<picker-view-column class="picker-box-column" style="">
							<view class="picker-box-item" style="" v-for="(item, index) in list[0]" :key="index">
								{{ item.label }}
							</view>
						</picker-view-column>
						<picker-view-column class="picker-box-column" style="">
							<view class="picker-box-item" style="" v-for="(item, index) in list[1]" :key="index">
								{{ item.label }}
							</view>
						</picker-view-column>
					</picker-view>
				</block>
				<!-- <block v-if="column == 3">
					 <picker-view :value="value" @change="onChange" indicator-class="picker-box" class="u-picker-view">
						 <picker-view-column class="picker-box-column" style="">
						 	<view class="picker-box-item" style="" v-for="(item, index) in years" :key="index">
						 		{{item}}年
						 	</view>
						 </picker-view-column>
						<picker-view-column>
							<view class="picker-box-item" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-box-item" v-for="(item,index) in days" :key="index">{{item}}日</view>
						</picker-view-column>
						</picker-view>
				</block> -->
			
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			max: {
				type: Number,
				default: 0
			},
			min: {
				type: Number,
				default: 1
			},
			column: {
				type: Number,
				default: 1
			},
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: function() {
					return []
				}
			},
			title: {
				type: String,
				default: ' '
			},
			titleColor: {
				type: String,
				default: '#fff'
			},
			cancelColor: {
				type: String,
				default: '#999'
			},
			confirmColor: {
				type: String,
				default: '#333'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确认'
			}
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				years,
				year,
				months,
				month,
				days,
				day,
				value: [0,0],
				selectedIndex: 0,
				selectedIndex1: 0
			}
		},
		
		methods: {
			onChange(e) {
				console.log(e, this.value,'onChange')
				this.selectedIndex = e.detail.value[0];
				// this.$emit('onChange',e.detail.value[0])
			},
			cancel() {
				// this.show = false
				this.$emit('cancel')
			},
			bindChange: function(e) {
				console.log(e,'bindChange')
				const val = e.detail.value
				this.selectedIndex = val[0]
				this.selectedIndex1 = val[1]
				// this.day = this.days[val[2]]
			},
			confirm() {
				console.log(this.selectedIndex,this.selectedIndex1,'this.value')
				if(this.column == 1){
					this.$emit('confirm', this.selectedIndex)
				}else {
					this.$emit('confirm', [this.selectedIndex,this.selectedIndex1])
				}
				
				// console.log(this.list[this.selectedIndex],'eeeee')
				// this.show = false
				// this.smokeNum = this.list[this.selectedIndex].label;
			}
		}
	}
</script>

<style lang="less" scoped>
	.selected-item {
		color: blue;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		color: #00E587;
		line-height: 84rpx;
	}
	// picker选中的样式
	/deep/ .picker-box {
		width: 680rpx;
		height: 84rpx;
		// background: #57B88E;
		border-radius: 12rpx;
		opacity: 0.12;
		line-height: 84rpx;
		
	}
	/deep/ .u-drawer-content {
		background-color: #111113 !important;
	}

	.toolbar-wrap {
		// padding-top: 20rpx;
		height: 120rpx;
		line-height: 120rpx;
		// margin: 0 32rpx;
		padding: 0 32rpx;
		background-color: #111113;
		// border-bottom: 2rpx solid #EEEEEE;
	}
	.image_9 {
		width: 32rpx;
		height: 21rpx;
	}

	.u-picker-view {
		width: 100%;
		height: 424rpx;
		display: flex;
		justify-content: center;
	}

	.picker-box-column {
		display: flex;
		justify-content: center;
		width: 680rpx;
		// background-color: red;
	}

	.picker-box-item {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		// color: black;
		color: #fff;
		line-height: 84rpx;
	}



	.flex-row {
		display: flex;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.items-center {
		align-items: center;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}
</style>